<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>bootstrap项目2</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
	
		<!-- 导航栏12-28 -->
		<!-- navbar-inverse反转样式 -->
		<!-- navbar-fixed-top顶对齐 -->
		<!-- navbar-fixed-bottom底对齐 -->
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<!-- 头部 -->
				<div class="navbar-header">
					<a href="javascript:" class="navbar-brand">线性代数</a>
				</div>
				<!-- 导航内容 -->
				<ul class="nav navbar-nav">
					<li><a href="javascript:">高等数学</a></li>
					<li><a href="javascript:">高等数学</a></li>
					<li><a href="javascript:">高等数学</a></li>
				</ul>
			</div>
			
			<!-- 响应式样式 -->
			<div class="container-fluid">
				<!-- 头部 -->
				<div class="navbar-header">
					<a href="javascript:" class="navbar-brand">线性代数</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target="#zk">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<!-- 导航内容 -->
				<div class="collapse" id="zk">
					<ul class="nav navbar-nav">
						<li><a href="javascript:">高等数学</a></li>
						<li><a href="javascript:">高等数学</a></li>
						<li><a href="javascript:">高等数学</a></li>
					</ul>
				</div>
				
			</div>
	
		</nav>
		<nav class="navbar navbar-inverse navbar-fixed-bottom">
			<div class="container-fluid">
				<!-- 头部 -->
				<div class="navbar-header">
					<a href="javascript:" class="navbar-brand">线性代数</a>
				</div>
				<!-- 导航内容 -->
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" placeholder="请输入内容" class="form-control"/>
						<input type="button" class="btn-default" value="提交"/>
					</div>
				</form>
			</div>
		</nav>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- 文本标签 -->
		<!-- 标题标签 -->
		<!-- 副标题标签 -->
		<h1>h1_kang1 	<small>s_kang1</small></h1>
		<h4>h4_kang1 	<small>s_kang1</small></h4>
		<p class="h2">p_kang</p>
		<div class="h3">
			d_h3_kang
		</div>
		<p class="small">ps_kang</p><!-- p的85% -->
		
		<p class="text-left">kang-left</p>
		<p class="text-center">kang-center</p>
		<p class="text-right">kang3-right</p>
		<p class="text-muted">变灰kang4-muted</p>
		<p class="text-primary">变蓝kang5-primary</p>
		<p class="text-success">变绿kang6-success</p>
		<p class="text-info">变蓝kang-info</p>
		<p class="text-warning">变暗橙kang-warning</p>
		<p class="text-danger">变暗红kang-danger</p>
		<br><br>
		<!-- 缩写标签 -->
		<abbr title="大古">迪迦奥特曼</abbr>
		<abbr title="大古" class="initialism">迪迦奥特曼</abbr>
		<!-- 地址标签 -->
		<address>
			<strong>M78星云</strong>
			奥特之星
		</address>
		<!-- 引用段落 -->
		<!-- pull-right右浮动 -->
		<blockquote style="margin-left: 20px;" class="pull-right">
			<p>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
			<small>出自 <cite title="孔子">论语</cite></small>
		</blockquote>
		
		<br><br>
		<!-- 设置无项目符号列表 -->
		<ul class="list-unstyled">
			<li>水平排列的列表</li>
			<li>水平排列的列表</li>
			<li>水平排列的列表</li>
			<li>水平排列的列表</li>
		</ul>
		
		<!-- 设置内联列表 -->
		<ul class="list-inline">
			<li>水平排列的列表</li>
			<li>水平排列的列表</li>
			<li>水平排列的列表</li>
			<li>水平排列的列表</li>
		</ul>
		<!-- 定义列表样式，大于768px才有效 -->
		<ul class="dl-horizontal">
			<dt>标题</dt>
			<dd>内容内容内容内容内容</dd>
			<dt>标题</dt>
			<dd>内容内容内容内容内容</dd>
		</ul>
		<!-- 单行代码 -->
		<code>
			for(var i=0;i=5;i++){alert(i);}
		</code>
		<!-- 按键 -->
		<kbd>按键</kbd>
		<!-- 多行代码 最大高度仅为340px-->
		<pre class="pre-scrollable">
			window.onload=function(){
					var c=document.getElementById("myCanvas"); 
					var ctx=c.getContext("2d"); 
				}

		</pre>
		
		
		
		<!-- table-responsive表格响应式 -->
		<div class="table-responsive">
			<!-- table-striped隔行变色 -->
			<!-- table-hover鼠标悬停 -->
			<!-- table-bordered边框线表格 -->
			<!-- table-condensed紧凑型表格 -->
			<table class="table table-condensed">
				<thead>
					<th>周一</th>
					<th>周二</th>
					<th>周三</th>
				</thead>
				<tbody>
					<tr class="success">
						<td>高等数学</td>
						<td>线性代数</td>
						<td>离散数学</td>
					</tr>
					<tr class="warning">
						<td>数学分析</td>
						<td>概率统计</td>
						<td>高等代数</td>
					</tr>
					<tr class="danger">
						<td>高等数学</td>
						<td>高等数学</td>
						<td>高等数学</td>
					</tr>
				</tbody>
				
			</table>		
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		<!-- 表单最基础的样式 -->
		<!-- form-inline内联表单，仅能在(768px,正无穷)才有效果 -->
		<form action="" method="" class="form-inline">
			<div class="form-group">
				<label for="name">姓名：</label>
				<!-- input-lg设置大控件 input-xs设置小控件 -->
				<input type="text" placeholder="请输入姓名"  id="name" class="form-control input-lg" />
			</div>
			<div class="form-group">
				<textarea class="form-control" rows="" cols="">
				</textarea>
			</div>
			<div class="form-group">
				<select name="" class="form-control">
					<option value="">柯南</option>
					<option value="">路飞</option>
					<option value="">亚索</option>
				</select>
			</div>
		</form>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		
		<button class="btn btn-default">默认按钮</button>
		<button class="btn btn-primary">原始按钮</button>
		<button class="btn btn-success">成功按钮</button>
		<button class="btn btn-info">信息按钮</button>
		<button class="btn btn-warning">谨慎按钮</button>
		<button class="btn btn-danger">危险按钮</button>
		<button class="btn btn-link">链接按钮</button>
		<br><br><br>
		<button class="btn btn-defaul">正常按钮</button>
		<button class="btn btn-default btn-lg">大按钮</button>
		<button class="btn btn-default btn-sm">小按钮</button>
		<button class="btn btn-default btn-xs">超小按钮</button>
		<button class="btn btn-default btn-block">独占一行按钮</button>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<!-- 设置圆角 -->
		<img src="img/1.jpg" class="img-rounded" title="设置圆角">
		<!-- 设置正圆 -->
		<img src="img/1.jpg" class="img-circle" title="设置正圆">
		<!-- 设置边框样式，有响应式效果 -->
		<img src="img/1.jpg" class="img-thumbnail" title="置边框样式，有响应式效果">
		<!-- 设置响应式效果 -->
		<img src="img/1.jpg" class="img-responsive" title="设置响应式效果" style="margin-top: 10px;">
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<!-- 背景 -->
		<div class="bg-success">
			
		</div>
		<!-- 删除样式 -->
		<button class="btn-primary btn-block">
			你有新消息
			<span class="close">&times;</span>
		</button>
		<!-- 下拉按钮 -->
		<button class="btn-primary btn-block">
			请选择
			<span class="caret"></span>
		</button>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<!-- 浮动 -->
		<div class="clearfix" style="width: 300px;height: 300px;background: #2AABD2;">
			<div class="pull-left text-center" style="background: #D43F3A; width: 30px;height: 30px;">
				左
			</div>
			<div class="pull-right text-center" style="background: #D43F3A; width: 30px;height: 30px;">
				右
			</div>
			<div class="center-block text-center" style="background: #D43F3A; width: 30px;height: 30px;">
				中
			</div>
			
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<!-- show设置了最高优先级 -->
		<p style="display: none;" class="show">柯南</p>
		<p>柯南</p>
		<!-- hidden隐藏 -->
		<p class="hidden">柯南</p>
		<!-- invisible隐形 -->
		<p class="invisible">柯南</p>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		<!-- 设置字体图标颜色 -->
		<button class="btn btn-primary">
			<span class="glyphicon glyphicon-search text-danger"></span>
			搜索
		</button>
		<!-- 设置字体图标大小 -->
		<button class="btn btn-danger btn-lg">
			<span class="glyphicon glyphicon-heart "></span>
			爱心
		</button>
		<!-- 设置字体图标阴影 -->
		<button class="btn btn-danger" style="box-shadow: 3px 3px 3px black;">
			<span class="glyphicon glyphicon-heart"></span>
			爱心
		</button>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<hr ><!-- 一条线 -->
		
		<!-- 按钮组 -->
		
		<div class="btn-toolbar">
			<div class="btn-group btn-group-xs">
				<button type="button" class="btn btn-info">按钮</button>
				<button type="button" class="btn btn-info">按钮</button>
				<button type="button" class="btn btn-info">按钮</button>
			</div>
			<div class="btn-group ">
				<button type="button" class="btn btn-info">按钮</button>
				<button type="button" class="btn btn-info">按钮</button>
				<button type="button" class="btn btn-info">按钮</button>
			</div>
			<div class="btn-group ">
				<button type="button" class="btn btn-info">按钮</button>
				<button type="button" class="btn btn-info">按钮</button>
				<button type="button" class="btn btn-info">按钮</button>
			</div>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		<!-- 垂直按钮组 -->
		<div class="btn-group-vertical">
			<button type="button" class="btn btn-info">按钮</button>
			<button type="button" class="btn btn-info">按钮</button>
			<button type="button" class="btn btn-info">按钮</button>
		</div>
		<!-- 自适应按钮组  不建议使用button标签，会受影响-->
		<div class="">
			<a href="#" class="btn btn-info">a按钮</a>
			<a href="#" class="btn btn-info">a按钮</a>
			<a href="#" class="btn btn-info">a按钮</a>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		<!-- 下拉菜单 -->
		<!-- data-toggle触发事件 -->
		<!-- dropdown下菜单 dropup上菜单 -->
		<div class="dropdown">
			<button type="button" class="btn" data-toggle="dropdown">
				请选择<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<!-- 被选中的状态 -->
				<li class="active"><a href="#">高等数学</a></li>
				<!-- 分割线 -->
				<li class="divider"><a href="#">线性代数</a></li>
				<!-- 禁用的状态 -->
				<li class="disabled"><a href="#">离散数学</a></li>
				<li><a href="#">数学分析</a></li>
				<li><a href="#">概率论</a></li>	
				
				<!-- 标题样式 -->
				<li class="dropdown-header">
					<a href="#">微积分</a>
				</li>
				
				
			</ul>
		</div>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<!-- 警告框 -->
		<!-- data-dismiss删除事件 -->
		<div class="alert alert-danger alert-dismissable">
			曲面积分<button type="button" class="close" data-dismiss="alert">&times;</button>
		</div>
		
		
		<!-- 导航元素 -->
		<!-- 标签页 -->
		<ul class="nav nav-tabs">
			<li class="active">
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
		</ul>
		<!-- 胶囊式 -->
		<ul class="nav nav-pills">
			<li class="active">
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
		</ul>
		<!-- 垂直导航元素 -->
		<ul class="nav nav-pills nav-stacked">
			<li class="active">
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
		</ul>
		
		<ul class="nav nav-tabs nav-stacked">
			<li class="active">
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
		</ul>
		
		<!-- 自适应  小于768px会失效 -->
		<ul class="nav nav-pills nav-justified">
			<li class="active">
				<a href="#" class="caret">极限</a>
			</li>
			<li class="dropdown">
				<a href="#" data-toggle="dropdown">极限</a>
				<ul class="dropdown-menu">
					<li><a href="">奥数</a></li>
					<li><a href="">高数</a></li>
				</ul>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
			<li>
				<a href="#">极限</a>
			</li>
		</ul>
		
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
